<template>
    <div class="body">
        <div class="container-fluid flex-box">
            <div class="left-box">
                <div class="title-left">
                    <img src="@/assets/img/links.png" alt="">
                    <span class="left-title">ZTC Cross-chain</span>
                    <i class="bi bi-arrow-repeat"></i>
                </div>

                <div class="left-content">
                    <div class="left-one">
                        <div class="one">
                            <div class="one-tile">
                                <p>Transfer out</p>
                                <div class="left-buttons">
                                    <button  type="button" class="btn btn-primary " data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <div class="button-logo"><img :src="currentPledgeLogo" alt=""></div>
                                        <div class="button-tile">
                                            <p class="coin-name">{{crrentPledgeCoinName}}</p>
                                            <p class="blacklink">{{crrentPledgeNode}}</p>
                                        </div>
                                        <i class="bi bi-chevron-down"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li class="li-one" @click="getTranObject('image1','BTC','BTC')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/bteyuanlogo.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">BTC</p>
                                                <p class="span3">BTC</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                       <li @click="getTranObject('image2','ETH','ETH')"><a class="dropdown-item"  href="#">
                                            <img class="li-iocn" src="@/assets/img/ethxiao.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">ETH</p>
                                                <p class="span3">ETH</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                         <li @click="getTranObject('image3','USDT','USDT')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/usdtxiao.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">USDT</p>
                                                <p class="span3">USDT</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                         <li class="li-wu" @click="getTranObject('image4','BNB','BNB')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/BNBXIAO.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">BNB</p>
                                                <p class="span3">BNB</p>
                                            </div>
                                            </a>
                                         </li>
                                          <hr>
                                         <li class="li-wu" @click="getTranObject('image5','ZTC','ZTC')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/yuanlog.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">ZTC</p>
                                                <p class="span3">ZTC</p>
                                            </div>
                                            </a>
                                         </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="two-tile">
                                <p>Transfer out</p>
                                <div class="brick"><button @click="decrement()" type="button" class="btn btn-success">-</button>{{amount}}<button @click="increment()" type="button" class="btn btn-warning">+</button></div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="yuan"><i class="bi bi-arrow-down"></i></div>
                    <div class="left-two">
                        <div class="two">
                            <div class="one-two-title">
                                <p>Take over</p>
                                <div class="left-buttons">
                                    <button type="button" class="btn btn-primary " data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <div class="button-logo"><img :src="taketPledgeLogo" alt=""></div>
                                        <div class="button-tile">
                                            <p class="coin-name">{{takePledgeCoinName}}</p>
                                            <p class="blacklink">{{takePledgeNode}}</p>
                                        </div>
                                        <i class="bi bi-chevron-down"></i>

                                    </button>
                                   <ul class="dropdown-menu">
                                        <li class="li-one" @click="getTakeObject('image1','BTC','BTC')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/bteyuanlogo.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">BTC</p>
                                                <p class="span3">BTC</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                       <li @click="getTakeObject('image2','ETH','ETH')"><a class="dropdown-item"  href="#">
                                            <img class="li-iocn" src="@/assets/img/ethxiao.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">ETH</p>
                                                <p class="span3">ETH</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                         <li @click="getTakeObject('image3','USDT','USDT')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/usdtxiao.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">USDT</p>
                                                <p class="span3">USDT</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                         <li class="li-wu" @click="getTakeObject('image4','BNB','BNB')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/BNBXIAO.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">BNB</p>
                                                <p class="span3">BNB</p>
                                            </div>
                                            </a>
                                         </li>
                                          <hr>
                                         <li class="li-wu" @click="getTakeObject('image5','ZTC','ZTC')"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/yuanlog.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">ZTC</p>
                                                <p class="span3">ZTC</p>
                                            </div>
                                            </a>
                                         </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="two-two-title">
                                <span>Expected quantity to receive</span>

                            </div>
                        </div>
                    </div>
                    <div class="left-three">
                        <div class="three">
                            <div class="one-three-title">
                                <p>Receiving address</p>
                                <div class="three-div"><input class="three-input"
                                        placeholder="Please enter the receiving address" type="text">

                                    <button type="button" class="btn btn-primary dropdown-toggle custom-btn-lg"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li class="li-one"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/bteyuanlogo.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">BTC</p>
                                                <p class="span3">BTC</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                       <li><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/ethxiao.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">ETH</p>
                                                <p class="span3">ETH</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                         <li><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/usdtxiao.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">USDT</p>
                                                <p class="span3">USDT</p>
                                            </div>
                                            </a>
                                         </li>
                                         <hr>
                                         <li class="li-wu"><a class="dropdown-item" href="#">
                                            <img class="li-iocn" src="@/assets/img/BNBXIAO.png" alt="">
                                            <div class="li-iocn-des">
                                                <p class="span2">BNB</p>
                                                <p class="span3">BNB</p>
                                            </div>
                                            </a>
                                         </li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left-box-button">
                        <button class="left-button">Confirm</button>
                    </div>

                </div>
            </div>
            <div class="right-box">
                <div class="title-left">
                    <span class="right-title">Exchange record</span>
                    <i class="bi bi-arrow-repeat"></i>
                </div>
                <div class="right-box-content">
                    <div class="right-box-one">
                        <button class="button-state">Success</button>
                        <div class="right-box-title">
                            <span class="span1">0xeb45e2533f...49d6</span>
                            <span class="span2">2024/03/21</span>

                        </div>
                        <div class="button-list">
                            <div class="button1">

                                <button type="button" class="btn btn-primary "
                                    aria-expanded="false">
                                    <div class="button-logo"><img src="@/assets/img/bnb.png" alt=""></div>
                                    <div class="button-tile">
                                        <p class="coin-name">BNB</p>
                                        <p>bsc</p>
                                    </div>
                                </button>
                            </div>
                            <div class="right-img"><img class="right-imgs" src="@/assets/img/right.png" alt=""></div>

                            <div class="button2"><button type="button" class="btn btn-primary "
                                    aria-expanded="false">
                                    <div class="button-logo"><img src="@/assets/img/bnb.png" alt=""></div>
                                    <div class="button-tile">
                                        <p class="coin-name">BNB</p>
                                        <p>bsc</p>
                                    </div>

                                </button>
                            </div>
                        </div>

                    </div>

                    <hr id="hr">

                    <div class="right-box-one">
                        <button class="button-state">Fail</button>
                        <div class="right-box-title">
                            <span class="span1">0xeb45e2533f...49d6</span>
                            <span class="span2">2024/03/21</span>

                        </div>
                        <div class="button-list">
                            <div class="button1">

                                <button type="button" class="btn btn-primary "
                                    aria-expanded="false">
                                    <div class="button-logo"><img src="@/assets/img/bnb.png" alt=""></div>
                                    <div class="button-tile">
                                        <p class="coin-name">BNB</p>
                                        <p>bsc</p>
                                    </div>

                                </button>
                            </div>
                            <div class="right-img"><img class="right-imgs" src="@/assets/img/right.png" alt=""></div>

                            <div class="button2"><button type="button" class="btn btn-primary "
                                   aria-expanded="false">
                                    <div class="button-logo"><img src="@/assets/img/bnb.png" alt=""></div>
                                    <div class="button-tile">
                                        <p class="coin-name">BNB</p>
                                        <p>bsc</p>
                                    </div>
                                </button>
                            </div>
                        </div>

                    </div>

                    <hr id="hr">

                    <div class="right-box-one">
                        <button class="button-state">Fail</button>
                        <div class="right-box-title">
                            <span class="span1">0xeb45e2533f...49d6</span>
                            <span class="span2">2024/03/21</span>

                        </div>
                        <div class="button-list">
                            <div class="button1">

                                <button type="button" class="btn btn-primary "
                                    aria-expanded="false">
                                    <div class="button-logo"><img src="@/assets/img/bnb.png" alt=""></div>
                                    <div class="button-tile">
                                        <p class="coin-name">BNB</p>
                                        <p>bsc</p>
                                    </div>

                                </button>
                            </div>
                            <div class="right-img"><img class="right-imgs" src="@/assets/img/right.png" alt=""></div>

                            <div class="button2">
                                <button type="button" class="btn btn-primary "
                                    aria-expanded="false">
                                    <div class="button-logo"><img src="@/assets/img/bnb.png" alt=""></div>
                                    <div class="button-tile">
                                        <p class="coin-name">BNB</p>
                                        <p>bsc</p>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 引入SVG文件
export default {
  data () {
    return {
        images:{
            'image1':require('@/assets/img/bteyuanlogo.png'),
            'image2': require('@/assets/img/ethxiao.png'),
            'image3': require('@/assets/img/usdtxiao.png'),
            'image4': require('@/assets/img/BNBXIAO.png'),
            'image5': require('@/assets/img/yuanlog.png'),
        },
      currentPledgeLogo: require("@/assets/img/bnb.png"),
      crrentPledgeCoinName: "BNB",
      crrentPledgeNode:"bsc",

      taketPledgeLogo: require("@/assets/img/bnb.png"),
      takePledgeCoinName: "BNB",
      takePledgeNode:"bsc",

      amount:"0"

    }

  },methods:{
    getTranObject(str1,str2,str3){
        this.currentPledgeLogo=this.images[str1];
        this.crrentPledgeCoinName=str2;
        this.crrentPledgeNode=str3;
    },
    getTakeObject(str1,str2,str3){
        this.taketPledgeLogo=this.images[str1];
        this.takePledgeCoinName=str2;
        this.takePledgeNode=str3;
    },
   increment() {
      this.amount++;
    },
    decrement() {
      if (this.amount > 0) { // Optional: Prevent count from going below 0
        this.amount--;
      }
    }
  }

}
</script>

<style scoped lang="less">
.body {
    background-color: rgb(0, 0, 0);
}

.left-three {
    margin-top: 18px !important;
}

@media(max-width:768px) {
   
   .brick{
    display: flex;
    justify-content:space-between;
    align-items:center;
   }


  .btn-warning{
        margin-left: 10% !important;
    }
.btn-success{
     margin-right: 10% !important;
}




 .dropdown-menu{
    .li-wu{
        padding: 2px 0 5px 0;
    }
    .li-one{
        padding: 8px 0 0 0;
    }
    li{
        padding: 1px 0 1px 0;
    }
   }
   .dropdown-item{
    display: flex;
    justify-content: left;
    align-items: center;
    height: 20px;

    .li-iocn{
        width: 30px;
        height: 30px;
        margin-right:20px;
    }

    .li-iocn-des{
        width: 20px;
        text-align: left;
    }
    .span2{
        margin: 0;
        font-size: 12px;
        font-weight: 700;
    }
    .span3{
        margin: 0;
        font-size: 8px;
    }
   }
    .title-left {
        border: 0px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 32px;
            height: 32px;
            margin-right: 10px;

        }

        .bi-arrow-repeat {
            text-align: right;
        }
    }

    .left-buttons .btn {
        width: 128px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff !important;
        border: 1px solid rgb(0, 0, 0) !important;

        .button-logo img {
            width: 32px;
            height: 32px;
        }

        .button-tile {
            width: 45%;
            line-height: 1px;
            border: 0 !important;
            margin-top: 20px;
            text-align:  left;
            margin-left: 20px;
            .coin-name {
                font-size: 12px;
                color: rgb(0, 0, 0);
                line-height: 1px;
            }

            .blacklink {
                font-size: 8px;
                color: rgb(128, 128, 128) !important;
                font-weight: 400 !important;

            }
        }

        .bi-chevron-down {
            font-size: 15px;
            color: rgb(0, 0, 0);
            flex: 1;
        }
    }

    .left-two {
        margin-top: -8px !important;
    }

    .yuan {
        width: 35px;
        height: 35px;
        border: 1px solid rgb(207, 207, 207);
        border-radius: 50%;
        text-align: center;
        margin: auto !important;
        margin-top: -8px !important;
        color: rgb(207, 207, 207);
        font-size: 20px;
        line-height: -3px;
        background-color: #fff;
        position: relative;
        /* 或者 absolute, fixed, sticky */
        z-index: 2px;
    }

    .button-state {
        width: 74px;
        height: 24px;
        background-color: rgb(39, 179, 72);
        color: rgb(255, 255, 255);
        border: 0;
        border-radius: 5px;
        margin-top: 21px;
        font-size: 10px;
    }

    .right-box-title {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        border: 0 !important;

        .span1 {
            font-size: 14px;
            font-weight: 700;
        }

        .span2 {
            color: rgb(128, 128, 128);
            font-size: 10px;
        }
    }

    .button-list {
        margin-top: 16px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        margin-bottom: 26.5px;

        .right-img {
            text-align: center;
            margin: auto;
            border: 0 !important;
            width: 25% !important;
            margin-left: -15px;
        }

        .right-imgs {
            width: 28px;
            height: 28px;
            margin-right: 6px;
        }

        .button1 {
            margin-left: -1%;
        }

        .button2 {
            margin-right: -6.8%;
        }

    }

    .button1,
    .button2 {
        border: 0 !important;

        .btn {
            width: 128px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff !important;
            background-color: rgb(0, 0, 0) !important;

            .button-logo {
                width: 30%;

                img {
                    width: 32px;
                    height: 32px;
                    flex: 1 !important;
                }

                border: 0 !important;
            }

            .button-tile {
                width: 45%;
                line-height: 1px;
                border: 0 !important;
                margin-top: 7px;
                text-align:  left;
            margin-left: 20px;

                p {
                    font-size: 8px;
                    color: rgb(128, 128, 128);
                    margin-top: 16px;
                }

                .coin-name {
                    font-size: 12px;
                    color: #fff;
                }

            }
        }
    }

    .btn {
        background-color: rgb(255, 141, 26) !important;
        border: 0px !important;
        height: 30px;
        font-size: 12px !important;
        margin-top: -4px;
        margin-left: 3%;
    }

    .left-button {
        width: 96%;
        border: 0;
        margin-top: 18px;
        margin-bottom: 13px;
        height: 40px;
        background-color: rgb(240, 68, 21);
        color: #fff;
        font-size: 18px;
        text-align: center;
        border-radius: 5px;
    }

    input::placeholder {
        font-size: 9px !important;
        padding-left: 15px !important;
    }

    .brick {
        font-size: 18px;
        color: rgb(0, 0, 0);
    }

    .two-two-title {
        font-size: 11px;
        color: rgb(128, 128, 128);
    }

    .three-input {
        width: 60%;
    }

    .flex-box {
        flex-wrap: wrap !important;
    }

    .left-box,
    .right-box {
        width: 100%;
        min-width: 200px;
    }

    .flex-box {
        display: flex;
        justify-content: space-between;

        .right-title,
        .left-title {
            display: block;
            margin: 15px 0 15px 0;
            color: rgb(253, 241, 6);
            font-size: 22px;
        }

        .left-box {
            .left-content {
                width: 100%;
                background-color: #fff;
                padding: 11px 0 0 0;
                border-radius: 5px;
            }

        }

        .right-box {
            div {
                width: 100%;
                border: 1px solid rgb(253, 241, 6);
                border-radius: 5px;
            }
        }

        .right-box-content {
            margin-bottom: 20px !important;
        }

        .left-one,
        .left-two,
        .left-three {
            border-radius: 5px;
            width: 96% !important;
            border: 1px solid rgb(207, 207, 207);
            margin: auto;

        }

        .one,
        .two {
            display: flex;
            justify-content: space-between;
        }

    }

    .one-tile {
        margin-top: 10px;
        margin-left: 17px;
        margin-bottom: 16px;
    }

    .one-two-title {
        margin-top: 10px;
        margin-left: 17px;
        margin-bottom: 16px;
    }

    .one-three-title {
        margin-top: 10px;
        margin-left: 17px;
        margin-bottom: 16px;
    }

    .two-tile,
    .two-two-title,
    .three-three-title {
        margin-top: 14px;
        margin-right: 22px;
        margin-bottom: 8px;
    }

    .one-two-title p,
    .one-tile p,
    .one-three-title p {
        font-size: 10px;
        color: rgb(0, 0, 0) !important;
        font-weight: 700;
    }

}

@media(min-width:768px) {

  .brick{
    display: flex;
    justify-content:space-between;
    align-items:center;
   }


  .btn-warning{
        margin-left: 10% !important;
    }
.btn-success{
     margin-right: 10% !important;
}


   .dropdown-menu{
    .li-wu{
        padding: 2px 0 5px 0;
    }
    .li-one{
        padding: 8px 0 0 0;
    }
    li{
        padding: 1px 0 1px 0;
    }
   }
   .dropdown-item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;

    .li-iocn{
        width: 30px;
        height: 30px;
        margin-right:20px;
    }

    .li-iocn-des{
        width: 20px;
        text-align: left;
    }
    .span2{
        margin: 0;
        font-size: 12px;
        font-weight: 700;
    }
    .span3{
        margin: 0;
        font-size: 8px;
    }
   }
    .three-input {
        width: 79%;
    }

    input::placeholder {
        font-size: 9px !important;
        padding-left: 15px !important;
    }

    .button-state {
        width: 122.7px;
        height: 40px;
        background-color: rgb(39, 179, 72);
        color: rgb(255, 255, 255);
        border: 0;
        border-radius: 5px;
        margin-top: 21px;
    }

    .right-box-title {
        margin-top: 15px;
        ;
        display: flex;
        justify-content: space-between;
        color: #fff;
        border: 0 !important;

        .span1 {
            font-size: 18px;
            font-weight: 700;
        }

        .span2 {
            color: rgb(128, 128, 128);
            font-size: 14px;
        }
    }

    .button-list {
        margin-top: 16px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        margin-bottom: 26.5px;

        .right-img {
            text-align: center;
            margin: auto;
            border: 0 !important;
        }

        img {
            width: 28px;
            height: 28px;

        }

        .button1 {
            margin-left: -1%;
        }

        .button2 {
            margin-right: -3.8%;
        }

    }

    .button1,
    .button2 {
        border: 0 !important;

        .btn {
            width: 86%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff !important;
            background-color: rgb(0, 0, 0) !important;

            .button-logo {
                width: 30%;

                img {
                    width: 34px;
                    height: 34px;
                    flex: 1 !important;
                }

                border: 0 !important;
            }

            .button-tile {
                width: 45%;
                font-size: 18px;
                line-height: 1px;
                border: 0 !important;
                margin-top: 7px;
                text-align:  left;
                margin-left: 20px;

                p {
                    font-size: 12px;
                    color: rgb(128, 128, 128);
                    margin-top: 16px;
                }

                .coin-name {
                    font-size: 18px;
                    color: #fff;
                }

            }
        }
    }

    .left-three {
        margin-top: 56px !important;
    }

    .btn {
        background-color: rgb(255, 141, 26) !important;
        border: 0px !important;
        height: 30px;
        font-size: 12px !important;
        margin-top: -2px;
        margin-left: 3%;
    }

    .left-button {
        width: 96%;
        border: 0;
        margin-top: 58px;
        margin-bottom: 51px;
        height: 60px;
        background-color: rgb(240, 68, 21);
        color: #fff;
        font-size: 22px;
        text-align: center;
        border-radius: 5px;
    }

    input::placeholder {
        font-size: 12px !important;
        padding-left: 15px !important;
    }

    .brick {
        font-size: 24px;
        color: rgb(0, 0, 0);
    }

    .two-two-title {
        font-size: 14px;
        color: rgb(128, 128, 128);
    }

    .one-two-title p,
    .one-tile p,
    .one-three-title p {
        font-size: 10px;
        color: rgb(0, 0, 0) !important;
        font-weight: 700;
    }

    .body .container-fluid {
        width: 80% !important;
    }

    .three-input {
        width: 75%;
    }

    .left-box,
    .right-box {
        width: 45.5%;
        min-width: 200px;
    }

    .flex-box {
        display: flex;
        justify-content: space-between;

        .right-title,
        .left-title {
            display: block;
            margin: 48.5px 0 44px 0;
            color: rgb(253, 241, 6);
            font-size: 38px;
        }

        .left-box {
            .left-content {
                width: 100%;
                background-color: #fff;
                padding: 30px 0 0 0;
                border-radius: 5px;
            }

        }

        .right-box {
            div {
                width: 100%;
                border-radius: 5px;
                border-left: 1px solid rgb(253, 241, 6);
                border-right: 1px solid rgb(253, 241, 6);
                border-top: 1px solid rgb(128, 128, 128);
                border-bottom: 1px solid rgb(128, 128, 128);
                padding-bottom: 1.2px;
            }
        }

        .left-one,
        .left-two,
        .left-three {
            border-radius: 5px;
            width: 96% !important;
            border: 1px solid rgb(207, 207, 207);
            margin: auto;

        }

        .one,
        .two {
            display: flex;
            justify-content: space-between;
        }

    }

    .one-tile,
    .one-two-title,
    .one-three-title {
        margin-top: 16px;
        margin-left: 42px;
        margin-bottom: 25px;
    }

    .two-tile,
    .two-two-title,
    .three-three-title {
        margin-top: 16px;
        margin-right: 42px;
        margin-bottom: 25px;
    }

}

    @media(min-width:992px) {
     .brick{
    display: flex;
    justify-content:space-between;
    align-items:center;
   }


  .btn-warning{
        margin-left: 10% !important;
    }
.btn-success{
     margin-right: 10% !important;
}
   .dropdown-menu{
    .li-wu{
        padding: 2px 0 5px 0;
    }
    .li-one{
        padding: 8px 0 0 0;
    }
    li{
        padding: 1px 0 1px 0;
    }
   }
   .dropdown-item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;

    .li-iocn{
        width: 30px;
        height: 30px;
        margin-right:20px;
    }

    .li-iocn-des{
        width: 20px;
        text-align: left;
    }
    .span2{
        margin: 0;
        font-size: 12px;
        font-weight: 700;
    }
    .span3{
        margin: 0;
        font-size: 8px;
    }
   }
    .title-left {
        border: 0px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 45px;
            height: 45px;
            margin-right: 10px;

        }

        .bi-arrow-repeat {
            text-align: left;
            line-height: 1px;
            margin-top: 6px;
            margin-left: 30px;
        }
    }

    .right-box-content {
        margin-bottom: 216px !important;
    }

    .left-buttons .btn {
        width: 160px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff !important;
        border: 1px solid rgb(0, 0, 0) !important;

        .button-logo img {
            width: 34px;
            height: 34px;
        }

        .button-tile {
            width: 45%;
            line-height: 1px;
            border: 0 !important;
            margin-top: 20px;
            text-align:  left;
            margin-left: 20px;
            .coin-name {
                font-size: 17px;
                color: rgb(0, 0, 0);
                line-height: 1px;
            }

            .blacklink {
                font-size: 12px;
                color: rgb(128, 128, 128) !important;
                font-weight: 400 !important;

            }
        }

        .bi-chevron-down {
            font-size: 15px;
            color: rgb(0, 0, 0);
            flex: 1;
        }

    }

    .left-two {
        margin-top: -8px !important;
    }

    .yuan {
        width: 40px;
        height: 40px;
        border: 1px solid rgb(207, 207, 207);
        border-radius: 50%;
        text-align: center;
        margin: auto !important;
        margin-top: -8px !important;
        font-size: 20px;
        color: rgb(207, 207, 207);
        font-size: 23px;
        line-height: -5px;
        background-color: #fff;
        position: relative;
        /* 或者 absolute, fixed, sticky */
        z-index: 2px;
    }

    .button-state {
        width: 122.7px;
        height: 40px;
        background-color: rgb(39, 179, 72);
        color: rgb(255, 255, 255);
        border: 0;
        border-radius: 5px;
        margin-top: 21px;
    }

    .right-box-title {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        border: 0 !important;

        .span1 {
            font-size: 18px;
            font-weight: 700;
        }

        .span2 {
            color: rgb(128, 128, 128);
            font-size: 14px;
        }
    }

    .button-list {
        margin-top: 16px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        margin-bottom: 26.5px;

        .right-img {
            text-align: center;
            margin: auto;
            border: 0 !important;
        }

        img {
            width: 28px;
            height: 28px;

        }

        .button1 {
            margin-left: -1%;
        }

        .button2 {
            margin-right: -3.8%;
        }

    }

    .button1,
    .button2 {
        border: 0 !important;

        .btn {
            width: 86%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff !important;
            background-color: rgb(0, 0, 0) !important;

            .button-logo {
                width: 30%;

                img {
                    width: 34px;
                    height: 34px;
                    flex: 1 !important;
                }

                border: 0 !important;
            }

            .button-tile {
                width: 45%;
                font-size: 18px;
                line-height: 1px;
                border: 0 !important;
                margin-top: 7px;

                p {
                    font-size: 12px;
                    color: rgb(128, 128, 128);
                    margin-top: 16px;
                }

                .coin-name {
                    font-size: 18px;
                    color: #fff;
                }

            }
        }
    }

    .left-three {
        margin-top: 56px !important;
    }

    .btn {
        background-color: rgb(255, 141, 26) !important;
        border: 0px !important;
        height: 30px;
        font-size: 12px !important;
        margin-top: -2px;
        margin-left: 3%;
    }

    .left-button {
        width: 96%;
        border: 0;
        margin-top: 30px;
        margin-bottom: 28px;
        height: 60px;
        background-color: rgb(240, 68, 21);
        color: #fff;
        font-size: 22px;
        text-align: center;
        border-radius: 5px;
    }

    input::placeholder {
        font-size: 12px !important;
        padding-left: 15px !important;
    }

    .brick {
        font-size: 24px;
        color: rgb(0, 0, 0);
    }

    .two-two-title {
        font-size: 14px;
        color: rgb(128, 128, 128);
    }

    .one-two-title p,
    .one-tile p,
    .one-three-title p {
        font-size: 10px;
        color: rgb(0, 0, 0) !important;
        font-weight: 700;
    }

    .body .container-fluid {
        width: 80% !important;
    }

    .three-input {
        width: 75%;
    }

    .left-box,
    .right-box {
        width: 45.5%;
        min-width: 200px;
    }

    .flex-box {
        display: flex;
        justify-content: space-between;

        .right-title,
        .left-title {
            display: block;
            margin: 48.5px 0 44px 0;
            color: rgb(253, 241, 6);
            font-size: 38px;
        }

        .left-box {
            .left-content {
                width: 100%;
                background-color: #fff;
                padding: 30px 0 0 0;
                border-radius: 5px;
            }

        }

        .right-box {
            div {
                width: 100%;
                border-radius: 5px;
                border-left: 1px solid rgb(253, 241, 6);
                border-right: 1px solid rgb(253, 241, 6);
                border-top: 1px solid rgb(128, 128, 128);
                border-bottom: 1px solid rgb(128, 128, 128);
                padding-bottom: 1.2px;
            }
        }

        .left-one,
        .left-two,
        .left-three {
            border-radius: 5px;
            width: 96% !important;
            border: 1px solid rgb(207, 207, 207);
            margin: auto;

        }

        .one,
        .two {
            display: flex;
            justify-content: space-between;
        }

    }

    .one-tile,
    .one-two-title,
    .one-three-title {
        margin-top: 16px;
        margin-left: 42px;
        margin-bottom: 25px;
    }

    .two-tile,
    .two-two-title,
    .three-three-title {
        margin-top: 16px;
        margin-right: 42px;
        margin-bottom: 25px;
    }
}

body {
    background-color: rgb(0, 0, 0) !important;
}

.body {
    width: 100%;
    background-color: rgb(0, 0, 0);
}

.one-two-title p,
.one-tile p,
.one-three-title p {
    font-size: 18px;
    color: rgb(0, 0, 0) !important;
    font-weight: 700;
}

.two-tile {
    font-size: 14px;
    color: rgb(128, 128, 128);

}

.three-div {
    width: 100%;
}

.three-input {
    height: 30px;
    background-color: rgb(207, 207, 207);
    border: 0;
    border-radius: 5px;

}

.left-box-button {
    width: 100%;
    text-align: center;
}

//-------------------------

.right-box-one {
    width: 89% !important;
    margin: auto;
    border: 0 !important;

}

#hr {
    width: 89%;
    margin: auto !important;
    margin: 0;
    color: rgb(128, 128, 128) !important;
}

.bi-arrow-repeat {
    flex: 1;
    color: #fff;
    width: 100%;
    font-size: 35px;

}
</style>
